<template>
    <div class="newsbanner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in list" :key="item.id">
                    <a :href="item.link">
                        <img :src="item.url" alt="" />
                        <div class="new_name">
                            <span>{{item.title}}</span>
                        </div>
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
    name:'newsBanner',
    props:{
        name:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        this.$nextTick(()=>{
            var swiper1 = new Swiper ('.newsbanner .swiper-container', {
                loop: true,
                speed:3000,
                autoplay:true,
                observer:true,
                observeParents:true,
                observeSlideChildren:true,
                // 如果需要分页器
                pagination: { 
                    el: ".swiper-pagination", 
                    dynamicBullets: true,
                    clickable: true, 
                },
                // 如果需要前进后退按钮
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl:".swiper-button-prev", 
                },
            })
        })
        this.getdata1()
    },
    methods:{
        getdata1(){
                this.$api.post('getAdList',{
                    "sort":"sort",
                    "limit":100, 
                    "group":this.name
                }).then(res=>{
                    console.log(res)
                    this.list = res.data.list
                })
            }
    }
}
</script>
<style lang="scss" scoped>
    @import  '@/assets/css/common.scss';
    .swiper-button-next,.swiper-button-prev{
        width: 62px!important;
        height: 62px!important;
        border-radius: 10px;
        line-height: 62px;
        text-align: center;
        color: #fff;
        
        background: rgba(0,0,0,.6);
        &::after{
            font-size: 18px!important;
            font-weight: bold;
        }
    }
    .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
        left: 85%;
    }
    .swiper-pagination-bullet-active{
        background: #fff!important;
    }
    .swiper-pagination-bullet{
        background: #FFCE25!important;
    }
</style>